<script setup lang="ts">

</script>

<template>
    <div class="content">
        <router-view v-slot="{Component}">
            <transition name="fade" mode="out-in">
                <!-- <keep-alive>
                    <component :is="Component"/>
                </keep-alive> -->

                <component :is="Component"/>
            </transition>
        </router-view>
    </div>
</template>

<style lang="scss">
// 动画效果
.fade-enter, .fade-enter-active, .fade-leave-active {
    transition: opacity 0.3s, transform 0.3s;
    transform: translateZ(0);
}


.fade-enter-from, .fade-leave-to {
    opacity: 0;
    transform: translateX(30px);
}
</style>